<template>
  <div class="perm-container">
    <el-card class="box-card" shadow="always">
      <div class="clearfix" slot="header">
        <b>
          <svg-icon icon-class="menu"/>
          {{ (menu && menu.label) ? ('【' + menu.label + '】') : '' }}权限分配
        </b>
      </div>
      <el-row style="margin-bottom: 10px">
        <el-col :span="18">
          <el-tag v-if="role" type="primary">{{ role.name }}</el-tag>
          <el-tag v-if="menu" type="success" style="margin-left: 5px">{{ menu.label }}</el-tag>
          <el-tag v-if="!role" type="info" style="margin-left: 5px"><i class="el-icon-info"> </i> 请选择角色
          </el-tag>
          <el-tag v-if="!menu" type="info" style="margin-left: 5px"><i class="el-icon-info"> </i> 请选择菜单
          </el-tag>

        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="primary" :disabled="isRoot" icon="el-icon-check" size="mini" @click="handleSubmit">提交
          </el-button>
        </el-col>
      </el-row>

      <div v-if="permissionList.length>0">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                     style="margin-top: 20px">全选
        </el-checkbox>
        <el-row>
          <el-col :span="8" v-for="permission in permissionList" style="margin-top: 20px">
            <el-tooltip class="item" effect="dark" placement="bottom">

              <div slot="content">URL权限：{{ permission.urlPerm }}<br/>按钮权限：{{ permission.btnPerm }}</div>
              <el-checkbox border v-model="permission.checked" :label="permission.id" :key="permission.id"
                           @change="handleCheckChange"
                           size="mini">
                {{ permission.name }}
              </el-checkbox>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
      <div style="text-align: center" v-else>
        <svg-icon icon-class="nodata" style="width: 150px;height:150px"/>
        <el-row>
          <el-link :underline="false" type="info">{{ !role ? "请选择角色" : (!menu ? "请选择菜单" : "暂无数据，您可在【菜单管理】配置权限数据") }}
          </el-link>
        </el-row>
      </div>

    </el-card>
  </div>
</template>

<script>

import {list as listPermission} from '@/api/admin/permission'
import {listRolePermission, updateRolePermission} from '@/api/admin/role'

export default {
  name: "Permission",
  props: ['type'],
  data() {
    return {
      loading: false,
      ids: [],
      initialCheckedPermissionIds: [],
      menu: undefined,
      role: undefined,
      isIndeterminate: true,
      checkAll: false,
      permissionList: [],
      isRoot: false
    }
  },
  methods: {
    handleQuery() {
      this.loading = true
      const that = this
      listPermission({
        queryMode: 'list',
        menuId: this.menu.id,
      }).then(response => {
        that.permissionList = response.data
        if (this.role.code == this.ROOT_ROLE_CODE) {  // 如果是超级管理员默认勾选全部且不可编辑
          this.isRoot = true
          that.permissionList.map(item => this.$set(item, 'checked', true))
          this.loading = false
        } else {
          this.isRoot = false
          listRolePermission(that.role.id, {menuId: this.menu.id}).then(res => {
            this.initialCheckedPermissionIds = res.data
            that.permissionList.map(item => {
              if (this.initialCheckedPermissionIds.includes(item.id)) {
                item.checked = true
              }
            })
            this.$forceUpdate()
            this.loading = false
          })
        }
      })
    },
    menuClick(menu, role) {
      this.role = role
      this.menu = menu

      if (role && menu) {
        this.handleQuery()
      } else {
        this.permissionList = []
        this.initialCheckedPermissionIds = []
      }
    },
    handleSubmit: function () {
      const checkedPermissionIds = this.permissionList.filter(item => item.checked).map(item => item.id)
      // 判断选中权限是否变动
      if (this.initialCheckedPermissionIds.length == checkedPermissionIds.length &&
        this.initialCheckedPermissionIds.sort().every(function (v, i) {
          return v == checkedPermissionIds[i]
        })) {
        this.$message.warning('数据未变动')
        return
      }
      updateRolePermission(this.menu.id, this.role.id, checkedPermissionIds).then(response => {
        this.$message.success('提交成功')
      })
    },
    handleCheckAllChange(checked) {
      if (checked) {
        this.permissionList.map(item => item.checked = true)
      } else {
        // 全不选
        this.permissionList.map(item => item.checked = false)
      }
      this.isIndeterminate = false;
    },
    handleCheckChange() {
      const checkedCount = this.permissionList.filter(item => item.checked).length
      this.checkAll = checkedCount === this.permissionList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.permissionList.length;
    },
  }
}
</script>

<style scoped>

.perm-container {
  margin-bottom: 20px;
}

</style>
